import React from "react";

interface DynamicIconProps {
  /**
   * 图标名称,驼峰命名
   * @example "BeakerIcon"
   */
  name: string;
  /**
   * 图标样式
   * @default "outline"
   * Outline24x24, 1.5px stroke
   * Solid24x24, Solid fill
   * Mini20x20, Solid fill
   * Micro16x16, Solid fill
   */
  style?: "outline" | "solid" | "mini" | "micro";
  className?: string;
}

/**
 * 动态加载 Heroicons 图标组件
 * 所有图标：https://heroicons.com/outline
 */
const DynamicIcon: React.FC<DynamicIconProps> = ({
  name,
  style = "outline",
  className,
}) => {
  let IconComponent;

  try {
    IconComponent = require(`@heroicons/react/24/${style}/${name}`).default;
  } catch (error) {
    console.warn(`Icon "${name}" with style "${style}" not found.`);

    return <div className={className} />;
  }

  return <IconComponent className={className} />;
};

export default DynamicIcon;
